import React, {useEffect} from 'react';
import {useLocation, useNavigate, useParams} from "react-router-dom";
import {Descriptions, Card, Space, Button} from 'antd'
import {useAppDispatch} from "@/hooks";
import {getHospitalListByIdAsync, useSelectorHosp} from "@/store/slice/hosp";
import {changeTitleByKey, delPanesByKey} from "@/store/slice/common"
function Show() {
    const {id} = useParams();
    const location = useLocation();
    const dispatch = useAppDispatch();
    const {hospListListInfo} = useSelectorHosp();
    const navigate = useNavigate();
    useEffect(() => {
        (async() =>{
            const result = await dispatch(getHospitalListByIdAsync(id as string));
            //等成功后，才能拿到数据result ，所以直接写在await后面，而不是外面
            dispatch(changeTitleByKey({
                key: location.pathname,
                title: result.data.hospital.hosname + '详情'
            }))

        })()
        // console.log(hospListListInfo,'========')
        // dispatch(changeTitleByKey({
        //     key: location.pathname,
        //     title: hospListListInfo.hospital.hosname + '详情'
        // }))
    }, []);
    return (
        //垂直方向有间距
        <Space direction={"vertical"}>
            {/*// 在外面套一层卡片组件*/}
            <Button onClick={() => {
                dispatch(delPanesByKey(location.pathname));
                navigate("/hospital/hospitalList")
            }} danger type={"primary"}>关闭并返回</Button>
            <Card>
                <Descriptions title="医院基本信息" bordered column={2}>
                    <Descriptions.Item label="Product">{hospListListInfo.hospital.hosname}</Descriptions.Item>
                    <Descriptions.Item label="医院LOGO">{
                        hospListListInfo.hospital.logoData && <img width={100} src={"data:image/png;base64,"+hospListListInfo.hospital.logoData} alt=""/>
                    }</Descriptions.Item>
                    <Descriptions.Item label="医院编码">{hospListListInfo.hospital.hoscode}</Descriptions.Item>
                    <Descriptions.Item label="医院地址">{hospListListInfo.hospital.param.fullAddress}</Descriptions.Item>
                    <Descriptions.Item label="乘车路线" span={2}>{hospListListInfo.hospital.route}</Descriptions.Item>
                    <Descriptions.Item label="医院介绍" span={2}>{hospListListInfo.hospital.intro}</Descriptions.Item>
                </Descriptions>
            </Card>
            <Card>
                <Descriptions column={2} title="医院预约规则信息" bordered>
                    <Descriptions.Item label="预约周期">{hospListListInfo.bookingRule.cycle}</Descriptions.Item>
                    <Descriptions.Item label="发号时间">{hospListListInfo.bookingRule.releaseTime}</Descriptions.Item>
                    <Descriptions.Item label="停号时间">{hospListListInfo.bookingRule.stopTime}</Descriptions.Item>
                    <Descriptions.Item label="退号时间">{hospListListInfo.bookingRule.quitTime}</Descriptions.Item>
                    <Descriptions.Item label="预约规则" span={2}>{
                        hospListListInfo.bookingRule.rule.map((v:any,index:number)=>(
                            <p key={index}>{v}</p>
                        ))
                    }</Descriptions.Item>
                </Descriptions>
            </Card>
        </Space>
    );
}

export default Show;